<template>
	<div class="maphuse">
		<div class="amap-page-container">
			<el-amap vid="amapDemo" :zoom="zoom" :center="center" :events="events" class="amap-demo" :plugin="plugin">
				<el-amap-text v-for="text,key in texts" :key="key" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
			</el-amap>

			<div class="house-map-popo">
				长按地图搜索附近房源
			</div>
		</div>

		<div class="house-info-box">
			<div class="house-item">
				<div class="house-img">
					<!--<img v-if="getlongHouseListdata.houseImgUrl.indexOf('?')==-1" :src="getlongHouseListdata.houseImgUrl+'?imageslim'" />-->
					<img :src="getlongHouseListdata.houseImgUrl" />
				</div>
				<div class="house-info">
					<div class="house-info-top">
						<div class="house-info-title">{{getlongHouseListdata.title}}</div>
						<div class="house-info-center">
							<div class="h-introduce">
								<span>{{getlongHouseListdata.room}}室{{getlongHouseListdata.hall}}厅{{getlongHouseListdata.toilet}}卫</span>
								<span>{{getlongHouseListdata.centiare}}m²</span>
							</div>
							<div class="house-info-price">
								￥<span>{{getlongHouseListdata.prices}}</span>元/晚
							</div>
						</div>
					</div>
					<div class="house-info-tags">
						<!--<span v-for="tagsitem,key in getlongHouseListdata.tags.split(',').slice(0,2)" v-if="tagsitem">{{tagsitem}}</span>-->
						<span v-for="item,key in tagsitem" :key="key">{{item}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../fetch/api'
	export default {
		name: "mapHouse",
		data() {
			let self = this;
			return {
				getlongHouseListdataALL: [],
				getlongHouseListdata: [],
				tagsitem: [],
				source: "web", // string 是
				houseType: self.$route.query.houseType, //  string 是
				cityId: self.$route.query.cityId, //  string 是
				lat: '', //  string 否
				lng: '', //  string 否
				check_in_time: '', //  string 是 开始时间戳
				check_out_time: '', //  string 是 结束时间戳
				app_tag: '',
				num: 0,
				move: false,
				zoom: 13,
				center: [106.552505, 29.55877],
				texts: [],
				plugin: [{
					pName: 'Geolocation',
					events: {
						init(o) {
							// o 是高德地图定位插件实例
							o.getCurrentPosition((status, result) => {
								if(result && result.position) {
									self.lng = result.position.lng;
									self.lat = result.position.lat;
									self.center = [self.lng, self.lat];
									self.loaded = true;
									self.$nextTick(() => {
										self.getlongHouseList();
										let textsjson = [];
										$.each(self.getlongHouseListdataALL, function(i, data) {
											let textsitem = {
												position: [data.lng, data.lat],
												text: "￥" + data.prices,
												offset: [0, 0],
												events: {
													click: () => {
														self.getlongHouseListdata = data
														self.tagsitemfun();
													}
												}
											};
											textsjson = textsjson.concat(textsitem);
										});
										self.texts = textsjson;
									});
								} else {}
							});
						}
					}
				}],
				events: {
					init: (o) => {},
					'touchstart': () => {
						self.move = false;
						self.num = 0;
						var setvel = setInterval(function() {
							self.num++;
						}, 1)
						setTimeout(function() {
							clearInterval(setvel);
						}, 500)
					},
					'touchmove': () => {},
					'touchend': (e) => {
						if(self.move || self.num < 100) {
							return
						} else {

							self.lng = e.lnglat.getLng().toString();
							self.lat = e.lnglat.getLat().toString();
							self.$nextTick(() => {
								self.getlongHouseList();
								let textsjson = [];
								$.each(self.getlongHouseListdataALL, function(i, data) {
									let textsitem = {
										position: [data.lng, data.lat],
										text: "￥" + data.prices,
										offset: [0, 0],
										events: {
											click: () => {
												self.getlongHouseListdata = data
												self.tagsitemfun();
											}
										}
									};
									textsjson = textsjson.concat(textsitem);
								});
								self.texts = textsjson;

							});
						}
					}
				}
			}
		},
		mounted() {
			this.getlongHouseList()
		},
		methods: {
			tagsitemfun() {
				var that = this;
				if(that.getlongHouseListdata.length != 0) {
					that.tagsitem = that.getlongHouseListdata.tags.split(",").splice(0, 2);
				}
			},
			getlongHouseList() {
				var that = this;
				var ajaxSign = {
					"source": that.source, // string 是
					"houseType": that.houseType, //  string 是
					"cityId": that.cityId, //  string 是
					"lat": that.lat, //  string 否
					"lng": that.lng, //  string 否
					"check_in_time": that.check_in_time, //  string 是 开始时间戳
					"check_out_time": that.check_out_time, //  string 是 结束时间戳
					"app_tag": that.app_tag, //  string 是 标签搜索， id用 ','隔开
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetShortList(ajaxData)
				.then(res => {
					var ajaxdata = res.result;
					that.getlongHouseListdataALL = ajaxdata;
					if(res.sta == 200) {
						that.getlongHouseListdata = ajaxdata[0];
						that.tagsitemfun();
						$.each(ajaxdata, function(i, data) {
							$.each(data.houseImgUrlList, function(j, imgurllistdata) {
								if(imgurllistdata.imgId == parseInt(data.houseImgUrl)) {
									data.houseImgUrl = imgurllistdata.imgUrl;
								}
							});
						});
					} else {
						return
					}
				})
			}
		}
	};
</script>

<style>
	body {
		overflow: hidden;
	}
	/*地图重构*/
	
	.maphuse .amap-page-container {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.maphuse .amap-overlay-text-container {
		background: #e34648;
		color: #fff;
		border: none;
		width: 1rem;
		line-height: .5rem;
		text-align: center;
		position: relative;
		overflow: visible;
	}
	
	.maphuse .amap-overlay-text-container::after {
		content: "";
		display: block;
		width: .15rem;
		height: .15rem;
		background: #e34648;
		position: absolute;
		bottom: -.06rem;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
	}
	/*显示房源*/
	
	.maphuse .house-info-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.maphuse .house-img {
		width: 2.78rem!important;
		height: 1.83rem;
	}
	
	.maphuse .house-img>img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.maphuse .house-item {
		display: flex;
		background: #fff;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.maphuse .house-info {
		margin-left: .26rem;
	}
	
	.maphuse .house-info-title {
		font-size: .35rem;
		color: #282828;
		width: 4.01rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.maphuse .h-introduce {
		overflow: hidden;
		display: -webkit-flex;
		display: flex;
		margin: 0.1rem 0;
		color: #7D7D7D;
	}
	
	.maphuse .h-introduce span:first-child {
		padding: 0 .1rem 0 0;
	}
	
	.maphuse .h-introduce span {
		display: block;
		font-size: .24rem;
		box-sizing: border-box;
		padding: 0 .1rem;
		position: relative;
	}
	
	.maphuse .h-introduce span:first-child {
		padding-left: 0;
	}
	
	.maphuse .h-introduce span::after {
		content: "";
		display: block;
		width: 1px;
		height: 50%;
		position: absolute;
		top: 25%;
		right: 0;
		transform: translateY(-50%);
		background: #9A9A9A;
	}
	
	.maphuse .h-introduce span:last-child::after {
		display: none;
	}
	
	.maphuse .house-info-center {
		display: flex;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		margin-top: .01rem;
	}
	
	.maphuse .house-info-price {
		font-size: .24rem;
		color: #e25051;
		margin-top: .2rem;
	}
	
	.maphuse .house-info-price>span {
		font-size: .38rem;
	}
	
	.maphuse .house-info-tags {
		display: flex;
		font-size: .24rem;
		margin-top: .3rem;
	}
	
	.maphuse .house-info-tags>span {
		display: block;
		color: #9a9a9a;
		padding: .04rem 0.05rem;
		border: 1px solid #9a9a9a;
		box-sizing: border-box;
		border-radius: 3px;
		margin-right: .15rem;
	}
	
	.maphuse .house-map-popo {
		width: 100%;
		text-align: center;
		font-size: .24rem;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: .05rem 0;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>